<!--
* description: 整车销售---订单管理
* author:xlc
* createdDate: 2020-11-17
-->
<template>
  <div class="">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      :title="titleName"
      center
      width="40%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <div
        v-loading="loading"
      >
        <one-table-template
          ref="multipleTable"
          style="margin-left:20px"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-form-fields="formField"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/vesalesapi.js'
import dialogHeader from '@/components/dialogHeader'
import Vue from 'vue'
export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
    titleName: {
      type: String,
      default: '自动发运开关'
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      loading: false,
      // 网格查询API配置对象
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey3',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.save(),
          text: this.$t('sys.button.confirm'),
          name: 'confirm',
          position: 'right'
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.closeEdit(),
          text: this.$t('sys.button.cancel'),
          name: 'cancel',
          position: 'right'
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件
            {
              compKey: 'compKey2',
              labelName: '自动发运开关：',
              codeField: 'auto',
              span: 12,
              clearable: false,
              component: () => import('@/components/org/LookupValue'),
              type: 'dropdownList',
              oFields: 'auto,autoname',
              options: [
                { auto: '1', autoname: '开启' },
                { auto: '0', autoname: '关闭' }
              ],
              isMul: false,
              isMust: true
            }
          ],
      // 动态生成网格列
      formField: {
        auto: '',
        UPDATE_CONTROL_ID: ''
      },
      // 是否使用刷新Key的方式刷新弹窗
      resetDialogKey: false,
      // 单表格模版页面组件回调事件
      callbackObj: {

      }
    }
  },
  watch: {
    popupsVisible(val) {
      if (val) {
        this.autoFind()
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },
    autoFind() {
      const that = this
      that.loading = true
      const queryObj = {
        // api配置
        apiConfig: orgApis.findAutoCarSend,
        // 条件/实体参数（变量），根据typeParam中的定义配置{}
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {}
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then(response => {
        that.loading = false
        if (response.result === '1') {
          Object.assign(this.formField, response.rows)
        }
      }).catch((e) => {
        that.loading = false
      })
    },
    // 保存
    save() {
      const that = this
      that.loading = true
      const queryObj = {
        // api配置
        apiConfig: orgApis.autoCarSend,
        // 条件/实体参数（变量），根据typeParam中的定义配置{}
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: this.formField
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then(response => {
        that.loading = false
        this.$message({
          message: response.msg,
          duration: 2000
        })
        if (response.result === '1') {
          this.closeEdit('1')
        }
      }).catch((e) => {
        that.loading = false
      })
    }
  }
}
</script>
